﻿<script type="text/javascript">
    $(document).ready(function () {

        function setReviewRating(rating) {

            for (var i = 1; i <= 5; i++) {

                if (i <= rating) {
                    $("#reviewStar" + i).removeClass("star_gray");
                    $("#reviewStar" + i).addClass("active_review");
                }
                else {
                    $("#reviewStar" + i).removeClass("active_review");
                    $("#reviewStar" + i).addClass("star_gray");
                }
            }
        }

        $(".review_star").click(function (e) {

            e.preventDefault();

            var rate = $(this).data("rate");
            
            $("#Rating").val(rate);
            
            setReviewRating(rate);
        });
    });
</script>
<div class="add_reviews_star">
    <ul class="add_reviews">
        <li><a href="#" id="reviewStar1" data-rate="1" class="star_gray review_star"></a></li>
        <li><a href="#" id="reviewStar2" data-rate="2" class="star_gray review_star"></a></li>
        <li><a href="#" id="reviewStar3" data-rate="3" class="star_gray review_star"></a></li>
        <li><a href="#" id="reviewStar4" data-rate="4" class="star_gray review_star"></a></li>
        <li><a href="#" id="reviewStar5" data-rate="5" class="star_gray review_star"></a></li>
    </ul>
</div>
